ブログの質を高めるために活用している表示系テクニック12選
はじめに
こんぬづは、初参戦のコミケも目当ての技術書群を手に入れて無事生還した田中です。おうちハック本の表紙がレーザーカッターで削ってあってすごく良い作りです！
さて今回のブログでは普段私が活用している、ブログの質を高めてくれる表示系テクニックを紹介します。
この記事の概要
ブログを構成する要素は文字だけではありません。画像であったりリンクであったり、または文字に対する装飾として太字にしたりなど様々です。画像を差し挟むことによって文章に区切りをつけたり、太字で重みをつけて他の箇所よりも重要であることを示したりなど、様々な表示系テクニックを使い分けることでその記事の可読性を高めたり、読者にその記事で伝えたいことをより的確に伝えることができます。
この記事では私が普段のブログ書きで活用しているそれら12の表示系テクニックと用途の解説をします。
また、各ブログのプラットフォームごとに表示させる方法は異なりますので、ここでは表示する要素について取り扱うのみとし、具体的な表示方法については触れません。それぞれのプラットフォームで同等の表現や近いものはあるはずなので、この記事で紹介する表現方法は各プラットフォームのものに対応させて参考にしてください。
各種表示系テクニック紹介
私が普段よく使っている表示系のテクニックは13あります。箇条書きにすると以下になります。
慣れている人からすると「当然こんなの知っているしやってるよ」という内容もあるかとは思いますが、それぞれについて用途、解説、例を示しながら紹介していきます。
箇条書き
同等の要素を列挙したい場合に使います。箇条書きは長い文章を読ませるのでなく要素のブロックとしてとらえられるようになるため可読性がとても上がります。
- 小麦粉
- 卵
- バター
- 砂糖
太字
太字を設定すると文章の中で特に重要視している箇所を表すことができます。これは読み手からすると記事をナナメ読みする時に特に役立ちます。
リンク
文字列に対して設定するリンクです。カードリンクとの使い分けとして、私はブログの本筋からそれるけど見てほしい時などに使うようにしたり、見た目としてリンクを列挙する時にカードリンクだと野暮ったくなってしまう時などにこちらの普通のリンクを使うようにしています。
カードリンク
カードリンクはリンクよりも目立たせたい時に使います。記事の中で特に参照して欲しいもの、その記事と合わせて読んで欲しいものをカードリンクで表現します。OGP画像とサイトの書き出しなどの追加情報が表示されるので通常のリンクよりも存在感が出ます。
Tweet
引用でも構わないですが、発言者のアカウント情報も付属するので発言の前後関係を追いやすいかったり、よりリアリティが出たりするメリットがあると思っています。
本気出すのは明日から明日から
— ダンボー田中?@百合好き野郎 (@ktanaka117) 2016年12月29日
画像
画像の用途は様々あります。一例として、私が一番大きいと思う用途としては文字しかないブログを読むという心理的な重さを軽減してくれる点です。文字の並びにその文章に関連する画像を一枚はさむだけで、文章全体で「何に関して述べているのか」「文章の中で述べているもののイメージはこうです」というような意図が伝わりやすくなる効果があります。また、イベントの紹介や、現場の雰囲気を伝えるのにも画像は役立ちます。
引用
言葉をよそからのデータソースであることを明記する際に使っています。connpassからのイベント概要や、取り扱う概念についてのwikipediaからの引用など。
Swift（スウィフト）は、アップルのiOSおよびmacOSのためのプログラミング言語。Worldwide Developers Conference (WWDC) 2014で発表された。アップル製OS上で動作するアプリケーションの開発に従来から用いられていたObjective-CやObjective-C++、C言語と共存することが意図されている[3]。
wikipediaより引用
スライド
イベントで登壇する時に使われた資料はよくネット上に公開されていたりします。私は普段slideshareやspeakerdeckで公開された資料から参考にしたスライドはembedしています。元のサイトにも辿れるので、読者が同じ作者の他の資料を読みたい時に参照することもできます。
動画
どうしても文字と画像だけでは伝えるのが難しい時は動画で見せるのは手っ取り早く、例えばアプリの動きのあるUIを見て欲しい時などに使っています。私は普段youtubeからembedしています。スライド同様元のサイトにも辿れるので、読者が同じ作者の他の動画をみたい時に参照することもできます。
テーブル
2つ以上の情報のセットが複数個ある場合に重宝します。なにかを比較してまとめるときなどにテーブルがあると見やすさがグっと上がります。イベントのタイムテーブルであったり、APIの仕様を説明する時、試行した物事の結果を表現したい時などにも使います。
| セッションタイトル | 登壇者 |
|---|---|
| try! Swiftを振り返る | 岸川 克己さん |
| Blending Culture in Twitter Client | 田中 賢治(ktanaka117) |
| SWIFT IN THE CLOUD | Caesar Wirthさん |
| Swiftの型システム | 平川 剛一さん |
| Enumはデキる子 ~case .Success(let value):~ | 田中 孝明さん |
| Objective-C のキャストと Swift の型変換を比べてみる | 熊谷 友宏（es_kumagai)さん |
| WWDC16のLabで既存プロジェクトをXcode 8対応する方法を聞いてきました | 植岡 和哉(fromkk)さん |
主催が振り返る今年一年のAKIBA.swift #akibaswift ｜ Developers.IO より一部抜粋
ページ内リンク
私は目次につけたりなどが多いのですが、ページ内リンクを使うとひとつの記事が長くなる場合に記事の途中から参照先を見つけやすくなります。この記事の「各種表示系テクニック紹介」の箇所でも利用しています。
アテンション・注意
私は記事全体に関して、読む上で特に読者に注意して欲しいことがある場合にこれを使います。例えば情報が古くなっている場合や、記述に誤りがあるときに正しい情報源を指し示すなど。
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。など。
まとめ
私が普段ブログを読みやすくするために使っている12の表示系テクニックを紹介しました。
冒頭にも書きましたが、具体的な表示方法や表示のされ方などは各ブログプラットフォームごとに異なります。自分のブログでどう表示されるかによって使い方が変わってくるかと思いますので、それぞれ試しながら自分のパターンを見つけていって、より質の高いブログを書いていきましょう。
